<html>
	<head>
		<meta charset="utf-8">
		<script src="https://apis.google.com/js/client.js?onload=init"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
	</head>
	<body ng-app="selectExample">

		<!-- http://stackoverflow.com/questions/15688313/how-can-i-populate-a-select-dropdown-list-from-a-json-feed-with-angularjs-->

		<script type="text/javascript">
			angular.module('selectExample', []).controller('ExampleController', ['$scope',
			function($scope) {
				
				gapi.client.load('provinciaendpoint', 'v1', null, 'https://robotapolar.appspot.com/_ah/api');
				
				$scope.colors = listProvincias();
				
				 
				
				
				$scope.colors = [{
					name : 'black',
					shade : 'dark'
				}, {
					name : 'white',
					shade : 'light'
				}, {
					name : 'red',
					shade : 'dark'
				}, {
					name : 'blue',
					shade : 'dark'
				}, {
					name : 'yellow',
					shade : 'light'
				}];
				$scope.myColor = $scope.colors[2];
				// red
			}
			
			function listProvincias() {
                gapi.client.provinciaendpoint.listProvincia().execute(function(resp) {
                        if (!resp.code) {
                                resp.items = resp.items || [];
                                var result = "";
                                for (var i=0;i<resp.items.length;i++) {
                                        result = result+ resp.items[i].name + "..." + "<b>" + resp.items[i].name + "</b>" + "[" + resp.items[i].id + "]" + "<br/>";
                                }
                                document.getElementById('listQuotesResult').innerHTML = result;
                        }
                });
        }
			
			]);
		</script>

		<form action="javascript:void(0);">
			<h2>List Partidos</h2>
			<div>
				<input id="listQuote" type="submit" value="List Partidos">
			</div>
		</form>
		<div id="listQuotesResult"></div>

		<form action="javascript:void(0);">
			<h2>Insert New Partido</h2>
			<div>
				<input id="txtAuthorName" placeholder="Author name here">
				</input>
				<hr>
			</div>

			<div ng-controller="ExampleController">
				Provincia:
				<select ng-model="myColor" ng-options="color.name for color in colors"></select>
				<hr>

			</div>

			<div>
				<input id="insertPartido" type="submit" value="Insertar Partido">
			</div>
		</form>

		<form action="javascript:void(0);">
			<h2>Delete Partido</h2>
			<div>
				<input id="quoteID" placeholder="Quote ID value">
				</input>
			</div>
			<div>
				<input id="deleteQuote" type="submit" value="Delete Partido">
			</div>
		</form>

		<script type="text/javascript">
			function init() {
				//Parameters are APIName,APIVersion,CallBack function,API Root
				gapi.client.load('partidoendpoint', 'v1', null, 'https://robotapolar.appspot.com/_ah/api');

				document.getElementById('listQuote').onclick = function() {
					listQuotes();
				}

				document.getElementById('insertPartido').onclick = function() {
					insertPartido();
				}

				document.getElementById('deleteQuote').onclick = function() {
					deleteQuote();
				}
			}

			//List Quotes function that will execute the listQuote call
			function listQuotes() {
				gapi.client.partidoendpoint.listPartido().execute(function(resp) {
					if (!resp.code) {
						resp.items = resp.items || [];
						var result = "";
						for (var i = 0; i < resp.items.length; i++) {
							result = result + resp.items[i].name + "..." + "<b>" + resp.items[i].name + "</b>" + "[" + resp.items[i].id + "]" + "<br/>";
						}
						document.getElementById('listQuotesResult').innerHTML = result;
					}
				});
			}

			//Insert Quote function
			function insertPartido() {
				//Validate the entries
				var _AuthorName = document.getElementById('txtAuthorName').value;

				//Build the Request Object
				var requestData = {};
				requestData.name = _AuthorName;
				gapi.client.partidoendpoint.insertPartido(requestData).execute(function(resp) {
					if (!resp.code) {
						//Just logging to console now, you can do your check here/display message
						console.log(resp.name);
					}
				});
			}

			//Delete Quote function
			function deleteQuote() {
				//Validate the entries
				var _ID = document.getElementById('quoteID').value;

				//Build the Request Object
				var requestData = {};
				requestData.id = _ID;
				console.log(requestData);
				gapi.client.partidoendpoint.removePartido(requestData).execute(function(resp) {
					//Just logging to console now, you can do your check here/display message
					console.log(resp);
				});
			}

		</script>
		<script src="https://apis.google.com/js/client.js?onload=init"></script>

	</body>
</html>